import MprLayout from "@/mpr/layout";
import type { MprData } from "@/mpr/types";
import { Flex, Spin } from "antd";
import React, { useEffect, useState } from "react";
import { useSearchParams } from "react-router";

const MprRoute: React.FC = () => {
  const [data, setData] = useState<MprData | null>(null);
  const [search] = useSearchParams();

  useEffect(() => {
    const _data = {
      studyUid: search.get("studyUid") || "",
      seriesUid: search.get("seriesUid") || "",
      wadoRoot: decodeURI(search.get("wadoRoot") || ""),
    };
    if (_data.studyUid && _data.seriesUid && _data.wadoRoot) {
      setData(_data);
    }
  }, [search]);

  return data ? (
    <MprLayout data={data} />
  ) : (
    <Flex justify="center" align="center" className="h-full">
      <Spin size="large" />
    </Flex>
  );
};

export default MprRoute;
